<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colorful Tetris Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="game-header">
            <h1>Colorful Tetris</h1>
        </div>
        
        <div class="game-container">
            <div class="game-info">
                <div class="score-container">
                    <h2>Score: <span id="score">0</span></h2>
                    <h3>Level: <span id="level">1</span></h3>
                    <h3>Lines: <span id="lines">0</span></h3>
                </div>
                
                <div class="next-piece-container">
                    <h3>Next Piece:</h3>
                    <canvas id="next-piece" width="100" height="100"></canvas>
                </div>
                
                <div class="controls-info">
                    <h3>Controls:</h3>
                    <p>← → : Move left/right</p>
                    <p>↑ : Rotate</p>
                    <p>↓ : Move down</p>
                    <p>Space : Drop</p>
                    <p>P : Pause</p>
                </div>
            </div>
            
            <div class="game-board-container">
                <canvas id="game-board" width="300" height="600"></canvas>
            </div>
        </div>
        
        <div class="game-footer">
            <button id="start-button">Start Game</button>
            <button id="pause-button">Pause</button>
            <button id="restart-button">Restart</button>
        </div>
    </div>
    
    <script src="tetris.js"></script>
</body>
</html>
